<template>
  <div>
    <div class="orderItem" v-for="item in list" :key='item.id'>
      <div class="shop">
        <img src="assets/shop1.png" alt="">
        <span class="name">{{item.shop}} ></span>
        <span class="status">{{item.status}}</span>
      </div>
      <div class="products" v-for="obj in item.products" :key='obj.id' @click="jumpOrderDetail(item.id)">
        <div class="productImg">
          <img :src="obj.url" alt="">
        </div>
        <div class="productInfo">
          <div>
            <span class='name'>{{obj.name}}</span>
            <span class='price'>¥{{obj.price}}</span>
          </div>
          <div>
            <span class="type">{{obj.type}}</span>
            <span class="count">x{{obj.count}}</span>
          </div>
        </div>
      </div>
      <div class="orderTotal">
        <p class="totalInfo">
          <span>共{{item.products.length}}件商品</span>
          <span>合计：¥{{item.total}}</span>
          <span>(含运费¥{{item.postage}})</span>
        </p>
        <div class="action">
          <p v-if="item.status == '待付款'">
            <span @click="showModal(1)">立即付款</span>
          </p>
          <p v-if="item.status == '待发货'">
            <span @click="show1=true">提醒发货</span>
          </p>
          <p v-if="item.status == '卖家已发货'">
            <span>查看物流</span>
            <span @click="showModal(2)">确认收货</span>
          </p>
          <p v-if="item.status == '已完成'">
            <span>查看物流</span>
            <span>评价</span>
          </p>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <confirm v-model="show" title="提示信息" @on-confirm="onConfirm">
        <p style="text-align:center;">{{content}}</p>
      </confirm>
    </div>
    <toast v-model="show1" type='text'>已提醒卖家发货</toast>
  </div>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
      show: false,  //立即付款，确认收货模态框显示
      show1: false, //提醒发货弹窗显示
      showType: 0,  //模态框显示状态 0无 1:立即付款 2:提醒发货 用于模态框确认按钮判断
      content: '',
    }
  },
  methods: {
    //订单状态按钮事件
    showModal(key) {
      console.log(key);
      let txt = '';
      switch (key) {
        case 1:  //立即付款
          txt = '确认立即前往付款吗？';
          break;
        case 2:  //确认收货
          txt = '确认立即完成收货吗？';
          break;
      }
      this.showType = key;
      this.content = txt;
      this.show = true;
    },
    //模态框确定
    onConfirm() {
      console.log(this.showType);
      if (this.showType == 1) {
        this.$router.push({ path: '/payment' })
      } else if (this.showType == 2) {
        console.log('收货完成');
      }
      this.show = false;
    },
    //跳转订单详情
    jumpOrderDetail(id){
      this.$router.push({path:'/orderDetail?id='+id})
    }
  }
}
</script>

<style lang="less" scoped>
.orderItem {
  padding: 10px;
  border-bottom: 1px solid #c6c6c6;
  .shop {
    img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-bottom: 3px;
    }
    .status {
      float: right;
      margin-right: 6px;
      font-size: 14px;
      color: #ffa534;
    }
  }
  .products {
    overflow: hidden;
    height: 70px;
    margin-bottom: 6px;
    .productImg {
      float: left;
      width: 25%;
      box-sizing: border-box;
      text-align: center;
      img {
        background: #c9c9c9;
        height: 60px;
        width: 60px;
        margin-top: 5px;
      }
    }
    .productInfo {
      float: right;
      width: 75%;
      box-sizing: border-box;
      > div {
        line-height: 34px;
        .type {
          font-size: 14px;
          color: #a3a3a3;
        }
        > span:last-child {
          float: right;
          margin-right: 6px;
          font-size: 14px;
        }
      }
    }
  }
  .orderTotal {
    text-align: right;
    border-top: 1px solid #c6c6c6;
    padding-top: 6px;
    padding-right: 6px;
    margin-bottom: 16px;
    .totalInfo,
    .action {
      font-size: 14px;
    }
    .totalInfo span:nth-child(2) {
      margin: 0 4px;
    }
    .action {
      margin-top: 4px;
      span {
        display: inline-block;
        line-height: 16px;
        width: 4em;
        text-align: center;
        color: #ffa534;
        border: 1px solid #ffa534;
        padding: 2px 4px;
        font-size: 13px;
        border-radius: 2px;
      }
    }
  }
}
.orderItem:last-child {
  border-bottom: none;
}
</style>
